<template>
  <div class="app-container">
    <el-row class="firstRow">
      <el-col :span="6">
        <el-row>
          <el-button type="primary" @click="addBtnClk">新增</el-button>
          <el-button class="gaoji" type="success">高级搜索</el-button>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="12">
        <el-input
          placeholder="请输入内容"
          v-model="ipt"
          class="input-with-select"
          prefix-icon="el-icon-search"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-table
      :default-sort="{ prop: 'date', order: 'descending' }"
      :data="list"
      border
      style="width: 100%"
      max-height="400"
    >
      <el-table-column align="center" type="index" label="#" width="50">
      </el-table-column>
      <el-table-column align="center" prop="title" label="标题" width="500">
      </el-table-column>
      <el-table-column align="center" prop="type" label="分类" width="100">
      </el-table-column>
      <el-table-column align="center" prop="author" label="作者" width="100">
      </el-table-column>
      <el-table-column sortable align="center" label="用时" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.time }}分钟</span>
        </template>
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="date"
        label="发布时间"
        width="120"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="info" size="small">详情</el-button>
          <el-button type="warning" size="small">修改</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100">
    </el-pagination>

    <el-drawer
      title="新增表单"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="30字以内"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.classify" placeholder="请选择">
            <el-option label="Css" value="Css"></el-option>
            <el-option label="Vue" value="Vue"></el-option>
            <el-option label="React" value="React"></el-option>
            <el-option label="Ajax" value="Ajax"></el-option>
            <el-option label="人资相关" value="人资相关"></el-option>
            <el-option label="Http" value="Http"></el-option>
            <el-option label="移动端" value="移动端"></el-option>
            <el-option label="开发经验" value="开发经验"></el-option>
            <el-option label="优化" value="优化"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时">
          <el-select class="slt" v-model="form.time" placeholder="请选择...">
            <el-option label="1分钟" value="1"></el-option>
            <el-option label="2分钟" value="2"></el-option>
            <el-option label="3分钟" value="3"></el-option>
            <el-option label="5分钟" value="5"></el-option>
            <el-option label="10分钟" value="10"></el-option>
            <el-option label="15分钟" value="15"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.content" placeholder="内容"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      ipt: "",
      drawer: false,
      direction: "rtl",
      form: {},
    };
  },
  created() {
    this.acquireList();
  },
  methods: {
    ...mapActions("msbd", ["acquireList"]),
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleClose() {
      this.toggleDw();
    },
    addBtnClk() {
      this.toggleDw();
    },
    toggleDw() {
      this.drawer = !this.drawer;
    },
    onSubmit() {
      console.log("submit!");
    },
  },
  computed: {
    ...mapState("msbd", ["list"]),
  },
};
</script>

<style scoped>
.firstRow {
  margin-bottom: 12px;
}
.gaoji {
  margin: 0;
}
/deep/ .slt{
  width: 40px;
}
</style>